<template>
  <div class="main">
    <p  class="main_text">抢单管理</p>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"  :show-overflow-tooltip="true" v-adaptive border>
        <el-table-column fixed label="预约单编号" prop="orderSn" />
        <el-table-column label="拖运费用(元)" prop="driverIncome" />
        <el-table-column label="预定时间" prop="appointments" />
        <el-table-column label="报废人姓名" prop="personName" />
        <el-table-column label="报废人电话" prop="phone" />
        <el-table-column label="车辆位置" prop="detailCarAddress" />
        <el-table-column label="车辆牌照" prop="carInfo.号牌号码" />
        <el-table-column label="网点地址" prop="detailDotAddress" />
        <el-table-column label="操作" fixed="right">
          <template #default="props">
            <el-button size="small" link type="primary" @click="rushOrderDialog(props.row)"
              v-if="roleList.write">抢单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <smartPager v-model:current-page="currentPage" v-model:page-size="pageSize" :total="Number(total)"
        @change="handleCurrentChange" />
    </div>
  </div>

  <!-- ############################################## 蒙层 ############################################## -->
  <!-- ****************************** 分配拖车 ****************************** -->
  <el-dialog v-model="centerDialogVisible" title="分配拖车" width="30%" align-center>
    <template #header>
      <div class="df aic">
        <el-icon style="color: #fff" size="20">
          <Edit />
        </el-icon>&nbsp;
        <p style="color: #fff">是否确认抢单</p>
      </div>
    </template>
    <span>抢单剩余时间20：20:20</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="checkRushOrder"> 确认抢单 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { AutonaviAdress } from '@/api/mapApi.js'; //经纬度转地址
import { formatTimeAll } from '../../../filters/index';
import { RequestDispatchCompanyGetROrder, RequestDispatchCompanyRobOrder } from '@/api/path/index.js';
import { ref } from 'vue';
import { CollectionTag, Edit } from '@element-plus/icons-vue';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const inquireData = ref<any>({
  value1: '',
  resource: '',
  name: '',
});
const centerDialogVisible = ref<any>(false);
const RucenterDialogVisible = ref<any>(false);

const tableData = ref<any>([]);
//全部
// function objectsContainProperty(arr: any, prop: any) {
//     return arr.every((obj: any) => prop in obj);
// }
const total = ref<any>(0);
const currentPage = ref<any>(1);
const pageSize = ref<any>(10);
const handleSizeChange = (val: number) => {
  getData();
};
const handleCurrentChange = (val: number) => {
  getData();
};
const getData = () => {
  RequestDispatchCompanyGetROrder(currentPage.value, pageSize.value).then((res: any) => {
    if (res.resultObj == null) {
      tableData.value = [];
    } else {
      tableData.value = res.resultObj.data;
      res.resultObj.data.forEach((item: any) => {
        item.appointments = formatTimeAll(item.appointments);
      });
      total.value = res.resultObj.total;
    }
  });
};
getData();
const orderDetail = ref<any>({});
const rushOrderDialog = (e: any) => {
  // centerDialogVisible.value = true
  let formData = new FormData();
  formData.append('orderSn', e.orderSn);
  formData.append('transportCompany', JSON.parse(localStorage.getItem('roleInfo')!).company);
  RequestDispatchCompanyRobOrder(formData).then((res: any) => {
    console.log(res);
    if (res.success == true) {
      ElMessage.success(res.msg);
      centerDialogVisible.value = false;
      getData();
    }
  });
};
/*--------------------------- 抢单 ---------------------------*/
const checkRushOrder = () => {
  let formData = new FormData();
  formData.append('orderSn', orderDetail.value.orderSn);
  formData.append('transportCompany', JSON.parse(localStorage.getItem('roleInfo')!).company);
  RequestDispatchCompanyRobOrder(formData).then((res: any) => {
    console.log(res);
    if (res.success == true) {
      ElMessage.success(res.msg);
      centerDialogVisible.value = false;
      getData();
    }
  });
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-icon svg {
    color: #fff;
  }

  .el-form {
    .el-icon svg {
      color: #dcdfe6;
    }
  }
}
</style>
